<template>
  <div class="container">
    <div class="top">
      <div class="left">
        <img src="/img/logo_1.jpg" alt="" />
      </div>
      <div class="right">
        <span>
          <a href=""> 我的档案 </a>
        </span>
      </div>
    </div>
    <div class="top_02">
      <el-steps :active="active" finish-status="success">
        <el-step title="计划行程住宿"></el-step>
        <el-step title="选择客房"></el-step>
        <el-step title="确认住宿"></el-step>
        <el-step title="打造个性化住宿"></el-step>
      </el-steps>

      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
    </div>
    <div class="top_03">
      <!-- 日期选择 -->
      <el-date-picker
        class="data"
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <!-- 房型选择 -->
      <el-select v-model="value" clearable placeholder="请选择" class="room">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button plain class="button"
        ><a href="/choose">确认住宿</a>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      // 选择日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 选择房型
      options: [
        {
          value: "选项1",
          label: "1间房-2成人,0儿童",
        },
        {
          value: "选项2",
          label: "1间房-1成人,0儿童",
        },
        {
          value: "选项3",
          label: "1间房-2成人,1儿童",
        },
        {
          value: "选项5",
          label: "1间房-2成人,2儿童",
        },
      ],
      value: "",
    };
  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  .top {
    display: flex;
    .left {
      img {
        display: inline-block;
        width: 20%;
        margin-top: 10px;
      }
    }
    .right {
      width: 90%;
      color: #767676;
      text-decoration: none;
      span {
        width: 90%;
        display: inline-block;
        margin-top: 10px;
        font-size: 12px;
        color: #767676;
        height: 100%;
        line-height: 100%;
        text-align: right;
      }
    }
  }
  .top_02 {
    background-color: black;
  }
  .top_03 {
    height: 150px;
    width: 100%;
    background-color: #eee;
    margin-top: 25px;
    position: absolute;
    .data {
      display: inline-block;
      margin: 0 auto;
      height: 50px;
      position: relative;
      top: 40%;
      left: 10%;
    }
    .room {
      display: inline-block;
      margin: 0 auto;
      height: 60px;
      position: relative;
      top: 40%;
      left: 15%;
    }
    .button {
      display: inline-block;
      margin: 0 auto;
      height: 45px;
      position: relative;
      top: 40%;
      left: 18%;
    }
  }
}
</style>
